<template>
  <view class="device-container">
		<tn-nav-bar alpha backTitle=""></tn-nav-bar>
    <view :style="{ paddingTop: vuex_custom_bar_height + 'px' }">  </view>
    <view class="header">
      <view class="title">扫描附近设备</view>
      <view class="refresh-btn"><text class="tn-icon-refresh"></text></view>
      <view class="subtitle">持续自动搜索中...</view>
    </view>
    <view class="bluetooth-area ">
			<view style="background-image: url('/static/image/quan.png');background-size:cover;
			background-repeat: no-repeat;width: 450rpx;height: 450rpx;" class="u-f-ajc">

		
      <view class="bluetooth-anim ">
        <view class="bluetooth-circle"></view>
        <view class="bluetooth-icon"><text class="tn-icon-bluetooth"></text></view>
      </view>
    </view>
	</view>
	<view class="bt-desc" @click="show = true" style="text-align: center;margin-bottom: 100rpx;">无法搜索到设备
		<text class="tn-icon-right"></text>
	</view>

    <view class="device-list">
      <view class="device-item" @click="toWifi" v-for="(item, idx) in devices" :key="idx">
        <text>{{ item }}</text>
        <text class="tn-icon-right"></text>

      </view>
    </view>
    <view class="loading"><text class="tn-icon-loading"></text></view>
		<tn-popup v-model="show" mode="bottom" borderRadius="50" closeBtn>
      <view class="pop-modal">
        <view class="pop-title">未搜索到设备</view>
        <view class="pop-desc">
          <view class="pop-section pop-section-title">如果您的设备未能被搜索到，请尝试以下步骤：</view>
          <view class="pop-section-title">检查设备状态：</view>
          <view class="pop-list">
            <view class="pop-li">• 确保智能宠物喂食器已正确连接电源，并且指示灯正常亮起或闪烁。</view>
            <view class="pop-li">• 如果指示灯未亮，请重插电源或检查电源插座。</view>
          </view>
          <view class="pop-section-title">重启设备：</view>
          <view class="pop-list">
            <view class="pop-li">• 按住设备上的连接按键5秒，直到指示灯熄灭或复位。</view>
            <view class="pop-li">• 等待几秒后再次按下连接按键，使指示灯闪烁，表示设备进入配对模式。</view>
          </view>
          <view class="pop-section-title">确保手机和设备在同一网络（仅 Wi-Fi 版）：</view>
          <view class="pop-list">
            <view class="pop-li">• 确保手机连接到2.4GHz Wi-Fi网络（部分设备不支持5GHz网络），并且Wi-Fi信号稳定。</view>
            <view class="pop-li">• 确保您的手机蓝牙已打开（如果需要蓝牙连接）。</view>
          </view>
          <view class="pop-section-title">重新启动应用程序：</view>
          <view class="pop-list">
            <view class="pop-li">• 关闭并重新启动智能宠物助手应用程序，重新尝试"添加设备"操作。</view>
          </view>
					<view style="height: 50rpx;"></view>
        </view>
      </view>
    </tn-popup>
  </view>
</template>

<script>
export default {
  data() {
		return {
			show: false,
      devices: [
        'MOMI蓝牙1',
        'MATE蓝牙3211',
        'MI air蓝牙S2',
        'MOMI蓝牙1'
      ]
    }
  },
  methods: {
    toWifi() {
      uni.navigateTo({
        url: '/pages/device/wifi/wifi'
      })
    }
  }
}
</script>

<style scoped>
.device-container {
  min-height: 100vh;
  background: #fff;
  padding: 0;
}
.header {
  position: relative;
  padding: 48rpx 0 0 40rpx;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #111;
}
.refresh-btn {
  position: absolute;
  right: 40rpx;
  top: 48rpx;
  color: #2e8bff;
  font-size: 42rpx;
}
.subtitle {
  font-size: 24rpx;
  color: #bbb;
  margin-top: 8rpx;
}
.bluetooth-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60rpx;
  margin-bottom: 40rpx;
}
.bluetooth-anim {
  /* width: 250rpx;
  height: 250rpx; */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bluetooth-circle {
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  border: 8rpx solid transparent;
  border-top: 8rpx solid #2e8bff;
  border-right: 8rpx solid #2e8bff;
  animation: spin 1.2s linear infinite;
	box-sizing: border-box; 
  /* position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box; */
}
.bluetooth-icon {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  background: #f8fcff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80rpx;
  color: #2e8bff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2rpx 16rpx rgba(46,139,255,0.08);
}
.bt-desc {
  color: #bbb;
  font-size: 26rpx;
  margin-top: 32rpx;
}
.device-list {
  margin: 32rpx 0 0 0;
  padding: 0 0 0 0;
}
.device-item {
  background: #fbfbfb;
  border-radius: 24rpx;
  margin: 0 24rpx 24rpx 24rpx;
  padding: 32rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  color: #222;
}
.arrow {
  color: #bbb;
  font-size: 32rpx;
}
.loading {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 54rpx;
  color: #bbb;
  font-size: 50rpx;
}
.tn-icon-loading {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.pop-modal {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  width: 100vw;
  max-width:700rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pop-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  color: #111;
}
.pop-desc {
  font-size: 28rpx;
  color: #222;
  line-height: 1.7;
}
.pop-section {
  margin-bottom: 18rpx;
  font-size: 28rpx;
  color: #222;
}
.pop-section-title {
  font-size: 28rpx;
  color: #111;
  font-weight: bold;
  margin-top: 18rpx;
  margin-bottom: 8rpx;
}
.pop-list {
  margin-left: 12rpx;
  margin-bottom: 8rpx;
}
.pop-li {
  font-size: 26rpx;
  color: #444;
  margin-bottom: 6rpx;
}
</style>
